<!-- 
	车型选择弹窗
 -->
<template>
	<view class="u-car-type f-por" @tap.stop>
		<search
			v-if="hasSearch"
			v-model="search"
			:placeholder="'搜索'"
			@input="searchHandler"
			:customStyle="'background: #F5F5F5;'"
			:customSearchStyle="'background: #FFFFFF'"
			:customClass="['f-bdr-sm']"
		></search>
		<view class="car-type f-frow">
			<view class="type-item f-fz16" :class="{ active: activeIndex === 0 }">品牌</view>
			<view class="type-item f-fz16" :class="{ active: activeIndex === 1 }">车型</view>
		</view>

		<!-- 搜索列表start -->
		<scroll-view scroll-y="true" v-if="searchList.length !== 0" class="u-search-list f-bc-whilte u-list">
			<view class="u-item f-fz15 border-bottom f-bc-whilte" v-for="(item, index2) in searchList" :key="index2" @tap="selectItem(item, activeIndex)">{{ item.cityName }}</view>
		</scroll-view>
		<!-- 搜索列表end -->

		<!-- list -->
		<swiper :indicator-dots="false" duration="500" :autoplay="false" :vertical="false" :current="activeIndex" :style="{ height: scrollHeight }">
			<!--   -->
			<swiper-item catchtouchmove="swiperTouchMoveHandler">
				<scroll-view scroll-y="true" :style="{ height: scrollHeight }" :scroll-into-view="scrollViewId" class="u-list">
					<block v-for="(list, index) in carBrandList" :key="index">
						<view class="u-item" :id="list.letter" v-if="list.letter !== carBrandList[index - 1].letter">{{ list.letter }}</view>

						<view class="u-item f-fz15 border-bottom sm-border f-bc-whilte">{{ list.carBrandName }}</view>
					</block>
				</scroll-view>
			</swiper-item>
			<!-- catchtouchmove="swiperTouchMoveHandler" -->
			<swiper-item catchtouchmove="swiperTouchMoveHandler">
				<scroll-view scroll-y="true" :style="{ height: scrollHeight }" :scroll-into-view="scrollViewId" class="u-list">
					<block v-for="(list, index) in carTypeList" :key="index">
						<view class="u-item" :id="list.letter">{{ list.letter }}</view>
						<view
							class="u-item f-fz15 border-bottom sm-border f-bc-whilte"
							v-for="(item, index2) in list.data"
							:key="index2"
							:class="[item.carName === activeId[1] ? 'active' : '']"
							@tap="selectItem(item, 1)"
						>
							{{ item.carName }}
						</view>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view
			class="u-indexed-list-bar"
			:style="{ height: indexBarHeight + 'px', top: indexListTop + 'px' }"
			@touchstart="touchStart"
			@touchmove.stop="touchMove"
			@touchend.stop="touchEnd"
			@touchcancel.stop="touchCancel"
			v-if="searchList.length === 0"
		>
			<block v-for="(items, index) in list" :key="index">
				<text v-if="items.letter !== list[index - 1].letter" :data-letter="items.letter" class="u-indexed-list-text" :style="{ height: indexBarItemHeight + 'px' }">
					{{ items.letter }}
				</text>
			</block>
		</view>
		<view class="u-indexed-list-alert" v-if="touchmove && indexListBar[touchmoveIndex].dataset">{{ indexListBar[touchmoveIndex].dataset.letter }}</view>
	</view>
</template>

<script>
import commonApi from '../../api/common.js';
import indexListMix from '../../mixins/indexList.js';
export default {
	mixins: [indexListMix],
	props: {
		top: {
			// 索引列表据顶部多高 rpx
			type: Number,
			default: 0
		},
		indexListTop: {
			type: Number,
			default: 0
		},
		scrollHeight: {
			type: String,
			default: 0
		},
		hasSearch: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			carBrandList: [],
			carBrandIndexBar: [],
			carTypeList: [],
			carTypeIndexBar: [],
			activeIndex: 0, // swiper当前的index
			activeId: [0, 0], // 选择id
			search: '', // 搜索关键词
			searchList: [], // 搜索列表
			list: [],
			indexListBar: []
		};
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success: function(res) {
				let winHeight = res.windowHeight;
				let barHeight = that.top != 0 ? uni.upx2px(700) : winHeight - uni.upx2px(204);
				that.winHeight = winHeight;
				that.indexBarHeight = barHeight;
				that.indexBarItemHeight = barHeight / 25;
				that.titleHeight = uni.upx2px(that.top != 0 ? 0 : 132);
			}
		});
		that.getCarBrandList();
	},
	methods: {
		/**
		 *
		 * */

		getCarBrandList() {
			const that = this;
			commonApi.getCarBrandList().then(res => {
				that.carBrandList = res.data;
				that.list = that.carBrandList;
				that.getIndexBarEle('carBrandIndexBar');
			});
		},

		getIndexBarEle(key) {
			const that = this;
			that.$nextTick(() => {
				let time = setTimeout(() => {
					let query = uni.createSelectorQuery();
					query
						.in(that)
						.selectAll('.u-indexed-list-text')
						.fields({ dataset: true }, res => {
							that[key] = res;
							that.indexListBar = that[key];
						})
						.exec();
					clearTimeout(time);
				}, 1000);
			});
		},

		/**
		 * 搜索
		 * */

		searchHandler() {
			const that = this;
			if (!that.search) {
				that.searchList = [];
				return;
			}
			let name = that.activeIndex === 1 ? 'carBrandName' : 'carName';
			let search = that.search,
				searchList = [];
			this.list.forEach(ele => {
				ele.data.forEach(e => {
					if (e[name].includes(search)) {
						searchList.push(e);
					}
				});
			});
			that.searchList = searchList;
		},
		/**
		 * 选择
		 * */
		selectItem(item, level) {
			const that = this;
			if (level === 0) {
				that.activeId[level] = item.carBrandName;
				commonApi.getCarTypeList(item.carBrandName, 1, 10000).then(res => {
					that.carTypeList = res.data.records.reduce((list, item) => {
						let e = list.find(ele => ele.letter === item.letter);
						if (e) {
							e.data.push(item);
						} else {
							list.push({
								letter: item.letter,
								data: [item]
							});
						}
						return list;
					}, []);
					that.list = that.carTypeList;
					that.activeIndex = 1;
				});
				that.getIndexBarEle('carTypeIndexBar');
				// 请求下一级数据
			} else {
				//
				that.activeId[level] = item.carName;
				that.$emit('selected', that.activeId);
			}
		},
		// 禁止swiper手动滑动
		swiperTouchMoveHandler() {
			return false;
		}
	}
};
</script>

<style lang="scss" scoped>
@import url('../../common/indexList.scss');
.u-car-type {
	.car-type {
		padding: 0 30rpx;
		.type-item {
			width: 94rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			position: relative;
		}

		.type-item.active {
			color: $uni-text-color-red;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				display: inline-block;
				height: 4rpx;
				background-color: $uni-text-color-red;
			}
		}
	}
	.type-item:first-child {
		margin-right: 100rpx;
	}
}
</style>
